import { Button, Checkbox } from 'antd'
import cs from 'classnames'
import Image from 'next/image'
import { useContext, useEffect, useState } from 'react'
import { CSSTransition } from 'react-transition-group'

import dialog from '@/assets/images/dialog.png'
import { GlobalContext } from '@/context'
import useLocale from '@/utils/useLocale'
import useSession from '@/utils/useSession'

import locale from './locale/index'
import style from './style/index.module.less'

function HomeDialog({
  visible,
  onVisible,
  onContinue,
}: {
  visible: boolean
  onVisible: (_: boolean) => void
  onContinue: (_: boolean) => void
}) {
  const t = useLocale(locale)
  const [checkedSession, setCheckedSession] = useSession('HomeDiakogChecked', 'false')
  const [checked, setChecked] = useState<boolean>(false)
  const onCheck = () => {
    setChecked(checked ? false : true)
  }
  useEffect(() => {
    setChecked(JSON.parse(checkedSession))
  }, [])
  useEffect(() => {
    setCheckedSession(JSON.stringify(checked))
  }, [checked])

  useEffect(() => {
    const func = (event: { preventDefault: () => void }) => {
      event.preventDefault()
    }

    if (visible) {
      document.addEventListener('mousemove', func, { passive: false })
      document.addEventListener('wheel', func, { passive: false })
    } else {
      document.removeEventListener('mousemove', func)
      document.removeEventListener('wheel', func)
    }

    return () => {
      document.removeEventListener('mousemove', func)
      document.removeEventListener('wheel', func)
    }
  }, [visible])

  const { lang } = useContext(GlobalContext)

  return (
    <>
      <CSSTransition in={visible} unmountOnExit timeout={10}>
        <div
          className={cs(
            'flex justify-center items-center bg-black bg-opacity-20 fixed top-0 left-0 z-[3001] w-screen h-screen transform-gpu'
          )}
        >
          <div
            className={cs(
              style['content'],
              'flex flex-col justify-center items-center',
              visible && style['animated']
            )}
          >
            <Image
              className={cs('w-[197px] h-[180px]')}
              src={dialog}
              alt="logo Logo"
              width={196}
              height={79}
              priority
            />
            <div className={cs('text-[40px] text-center font-bold Roboto p-[50px]')}>{t.title}</div>
            <div className={cs('text-[18px] font-normal pb-[50px] pt-[24px]', style['desc'])}>
              <div className=" cursor-pointer flex ">
                <Checkbox
                  checked={checked}
                  onChange={(e) => {
                    setChecked(e.target.checked)
                  }}
                ></Checkbox>
                <span onClick={onCheck} className="text-[#808080] text-[14px] px-2 py-1">
                  {t.desc}
                </span>
              </div>
            </div>
            <div className={cs('flex justify-center')}>
              <Button
                type="primary"
                ghost
                className={cs(style['cancel'])}
                onClick={() => onVisible(false)}
              >
                <span className="Roboto">{t.cancel}</span>
              </Button>
              <div className="w-[20px] h-full"></div>
              <Button
                type="primary"
                disabled={!checked}
                className={cs(style['continue'])}
                onClick={() => onContinue(false)}
              >
                <span className="Roboto">{t.continue}</span>
                <div className="w-[20px] h-full"></div>
                <Image
                  src="/arrow1.svg"
                  alt="logo Logo"
                  width={16}
                  height={16}
                  priority
                  className={cs(lang === 'en-US' ? '' : style['rtl-img'])}
                />
              </Button>
            </div>
          </div>
        </div>
      </CSSTransition>
    </>
  )
}
export default HomeDialog
